<template>
    <jb-crud-page
        ref="pageRef"
        title-icon="carbon:batch-job"
        title-text="新增订单"
        search-url="/api/admin/demoTable/datas"
        :searchBtnShown=false>
        <n-form
            ref="formRef"
            :label-width="80"
            :model="formValue"
            :rules="rules"
            size="medium">
            <n-form-item label="姓名" path="user.name">
                <n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
            </n-form-item>
            <n-form-item label="年龄" path="user.age">
                <n-input v-model:value="formValue.user.age" placeholder="输入年龄" />
            </n-form-item>
            <n-form-item label="电话号码" path="phone">
                <n-input v-model:value="formValue.phone" placeholder="电话号码" />
            </n-form-item>
            <n-form-item>
                <jb-table
                    ref="tableRef"
                    :row-config="{ height: 100 }">
                    <jb-column type="checkbox" width="60" fixed="left"></jb-column>
                    <jb-column type="seq" title="序号" width="60" fixed="left"></jb-column>
                    <jb-column field="name" title="姓名" min-width="140" fixed="left"></jb-column>
                    <jb-column field="userName" title="用户名" min-width="140"></jb-column>
                    <jb-column field="avatar" title="头像" width="100">
                        <template #default="{ row }">
                            <jb-avatar :src="row.avatar"></jb-avatar>
                        </template>
                    </jb-column>
                    <jb-column field="phone" title="手机号" min-width="140"></jb-column>
                    <jb-column field="email" title="E-mail" min-width="160">
                        <template #default="{ row }">
                            <span>{{ row?.email ? row?.email : '未设置' }}</span>
                        </template>
                    </jb-column>
                    <jb-column field="age" title="年龄" width="100" sortable></jb-column>
                    <jb-column field="roles" title="角色" min-width="140">
                        <template #default="{ row }">
                            <n-scrollbar v-if="row.roles" style="max-height: 100px">
                                <jb-tag-group :tags="row.roleNames"></jb-tag-group>
                            </n-scrollbar>
                            <span v-else>未设置</span>
                        </template>
                    </jb-column>
                    <jb-column field="hobbys" title="爱好" min-width="140">
                        <template #default="{ row }">
                            <jb-tag-group :tags="row.hobbys"></jb-tag-group>
                        </template>
                    </jb-column>
                    <jb-column field="briefInfo" title="简介" min-width="160"></jb-column>
                    <jb-column field="content" title="详情" width="120">
                        <template #default="{ row }">
                            <jb-btn
                                :icon="Icons.EYE"
                                type="primary"
                                secondary
                                tip-text="点击查看"
                                drawer-title="详情描述"
                                :drawer-html="row.content"
                                drawer-positive-text=""
                                circle
                            ></jb-btn>
                        </template>
                    </jb-column>
                    <jb-column title="操作" width="110" fixed="right">
                        <template #default="{ row }">
                            <jb-btn
                                tip-text="编辑"
                                :icon="Icons.EDIT"
                                type="warning"
                                secondary
                                circle
                                @click="
                                pageRef?.showEditModal('编辑Demo数据', {
                                    id: row.id
                                })"></jb-btn>
                            <jb-btn
                                tip-text="删除"
                                :icon="Icons.DELETE"
                                secondary
                                type="error"
                                class="mx-8px"
                                circle
                                confirm-text="确定删除这条数据？"
                                :url="`/api/admin/demoTable/delete/${row.id}`"
                                @success="pageRef?.loadData()"
                            ></jb-btn>
                        </template>
                    </jb-column>
                </jb-table>
            </n-form-item>
            <n-form-item>
                <n-button attr-type="button" @click="handleValidateClick"> 验证 </n-button>
            </n-form-item>
        </n-form>
    </jb-crud-page>
</template>

<script lang="ts">
import type { FormInst } from 'naive-ui'
import { useMessage } from 'naive-ui'
import { defineComponent, onMounted, ref } from 'vue'
import { Icons } from '@/constants'
import JbTagGroup from '@/components/_builtin/jb-tag-group/index.vue'
import DemoEdit from '@/views/_builtin/demo/table/basic/components/edit/index.vue'
import JbCrudPage from '@/components/_builtin/jb-crud-page/index.vue'
import type { Model } from '@/typings/api'
import { JBoltApi } from '@/utils'
import type { ResData } from '@/typings/request'

const pageRef = ref<InstanceType<typeof JbCrudPage> | null>(null)

const tableData = ref<Model[]>([])
const loading = ref<boolean>(false)
async function loadTreeData() {
    if (loading.value) return
    loading.value = true
    const { result } = await JBoltApi.get<ResData<Model[]>>(`/api/admin/role/datas`)
    loading.value = false
    tableData.value = result.data!
}

onMounted(() => {
    loadTreeData()
})


export default defineComponent({
    components: { JbCrudPage, JbTagGroup },
    computed: {
        DemoEdit() {
            return DemoEdit
        },
        Icons() {
            return Icons
        }
    },
    setup() {
        const formRef = ref<FormInst | null>(null)
        const message = useMessage()
        return {
            formRef,
            formValue: ref({
                user: {
                    name: '',
                    age: ''
                },
                phone: ''
            }),
            rules: {
                user: {
                    name: {
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    },
                    age: {
                        required: true,
                        message: '请输入年龄',
                        trigger: ['input', 'blur']
                    }
                },
                phone: {
                    required: true,
                    message: '请输入电话号码',
                    trigger: ['input']
                }
            },
            handleValidateClick(e: MouseEvent) {
                e.preventDefault()
                formRef.value?.validate((errors) => {
                    if (!errors) {
                        // message.success('Valid')
                        submit();
                    } else {
                        console.log(errors)
                        message.error('Invalid')
                    }
                })
            }
        }
    }
})

/**
 * 提交表单
 */
async function submit() {
    useMessage().success('submit')

    // await formRef.value?.validate()
    //
    // let url = props.id ? '/api/admin/permission/update' : '/api/admin/permission/save'
    // let data = { ...form }
    // if (form.openType != 2 && form.openType != 5) {
    //     delete data.openOption
    // } else {
    //     data.openOption = JSON.stringify(data.openOption)
    // }
    // let res = await JBoltApi.tryPost(url, data)
    // await window.$success('保存成功')
    // return res.data
}

</script>
